<template>
	<swiper class="h-100" circular>
		<swiper-item v-for="(item,index) in bannerList" :key="index">
			<!-- 背景图 -->
			<image class="w-100 h-100 position-fixed" :src="item.bannerUrl" mode="aspectFill"></image>
			<!-- 描述 -->
			<view class="position-fixed w-100 text-white">
				<view class="rowCenCen mt-5">
					<text class="font-weight-500 font-75">{{item.title}}</text>
				</view>
				<view class="rowCenCen letter-spacing">
					{{item.desc1}}
				</view>
				<view class="rowCenCen mt-5">
					{{item.desc2}}
				</view>
			</view>
			<!-- 按钮 -->
			<base-button classProp="position-fixed mx-auto text-white" styleProp="bottom: 150rpx;left: 0;right: 0;"
				@click="clickFn"></base-button>
			<!-- 底部文字 -->
			<view class="position-fixed w-100 rowCenCen text-white" style="bottom:65rpx">
				预约试驾&nbsp;&nbsp;&nbsp;>
			</view>
		</swiper-item>

	</swiper>
	<!-- 指示点 -->
	<view class="position-fixed rowCenCen w-100" style="bottom:20rpx">
		<view style="width: 20rpx;height: 20rpx;" class="radius-100 mx-1 bg-white" v-for="i in bannerList" :key="index"></view>
	</view>
</template>

<script setup lang="ts">
	import {
		ref
	} from 'vue'
	import {
		useStore
	} from 'vuex'
	// 点击回调函数
	const clickFn = () => {}
	// banner列表
	const bannerList = ref([])
	
	// 请求获取banner列表
	uniCloud.callFunction({
		name:'retrieveBanner',
		success({result:{data}}) {
			bannerList.value = data
		}
	})
</script>

<style>

</style>
